<template>
  <div class="detail">
    <!-- 医院名字与医院等级的结构 -->
    <div class="top">
      <div class="name">{{ detailStore.hospitalInfo.hospital?.hosname }}</div>
      <div class="level">
        <icon-thumb-up />
        <span>{{
          detailStore.hospitalInfo.hospital?.param.hostypeString
        }}</span>
      </div>
    </div>
    <!-- 医院的logo与路线 -->
    <div class="logo">
      <div class="left">
        <img
          :src="`data:image/jpeg;base64,${detailStore.hospitalInfo.hospital?.logoData}`"
        />
      </div>
      <div class="right">
        <div class="address">
          <icon-export />
          <span
            >具体位置:
            {{ detailStore.hospitalInfo.hospital?.param.fullAddress }}</span
          >
        </div>
        <div class="route">
          规划路线: {{ detailStore.hospitalInfo.hospital?.route }}
        </div>
      </div>
    </div>
    <div class="footer">
      <h1>医院介绍</h1>
      <p>
        {{ detailStore.hospitalInfo.hospital?.intro }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import useDetailStore from "@/store/modules/hospitalDetail";

const detailStore = useDetailStore();
</script>

<style lang="scss" scoped>
.detail {
  .top {
    display: flex;
    align-items: center;
    .name {
      font-size: 25px;
      font-weight: 550;
      // color: #5f5f5f;
    }
    .level {
      color: #7f7f7f;
      margin-left: 10px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      span {
        margin-left: 5px;
      }
    }
  }

  .logo {
    display: flex;
    .left {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      color: #7f7f7f;
      margin-left: 10px;
      flex: 1;
      line-height: 22px;
      div {
        margin: 10px 0px;
      }
    }
  }

  .footer {
    color: #7f7f7f;
    h1 {
      font-size: 18px;
    }
    p {
      font-size: 14px;
      margin-top: 10px;
      line-height: 25px;
    }
  }
}
</style>
